<!--
 * @FilePath: index.vue
 * @Author: jack
 * @Date: 2025-04-02 08:54:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-26 14:46:15
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->

<!--  班级统计页面  -->
<template>
  <div class="content-flex-box">
    <!-- 加载页面 -->
    <!-- <Loading-panel :loading="loading"></Loading-panel> -->
    <div class="class-flex-box row">
      <div class="statusFlex row">
        <img :src="schoolInfo.school_logo" />
        <span>{{ schoolInfo.school_name }}</span>
      </div>
      <div class="timeShow">
        体育馆考勤-缺勤名单
      </div>
      <div class="classSelect">
        {{ TimeStamp }}
      </div>
    </div>
    <div class="list-box" ref="listBoxRef" :style="'height:' + listBoxHeight + 'px;overflow: hidden;'">
      <div class="listItem" v-for="(item, index) in scrollList[page - 1]" :key="index">
        <div class="title" ref="titleRef">{{ item.className ? item.className.replaceAll('-', '') : '' }}&nbsp;({{
          item.total
        }})
        </div>
        <div class="totalData" ref="totalDataRef">
          <van-row :gutter="4">
            <van-col :span="12">
              <div class="itemsList2">
                <span>{{ item.displaySignName }}</span>
                <span>{{ item.singedCount }}</span>
              </div>
            </van-col>
            <van-col :span="12">
              <div class="itemsList2">
                <span>迟到</span>
                <span>{{ item.lateCount }}</span>
              </div>
            </van-col>
            <van-col :span="12">
              <div class="itemsList2">
                <span>{{ item.displayNoSignName }}</span>
                <span>{{ item.noSignCount }}</span>
              </div>
            </van-col>
            <van-col :span="12">
              <div class="itemsList2">
                <span>已请假</span>
                <span>{{ item.leaveCount }}</span>
              </div>
            </van-col>
          </van-row>
        </div>
        <!-- <div class="personList" v-seamlessScroll="{ step: nowSize(44), interval: 5000, data: item.classDisplayList }"
          :style="'height:' + scrollHeight + 'px;overflow: hidden;'"> -->
        <div class="personList" :style="'height:' + scrollHeight + 'px;overflow: hidden;'">
          <div class="rowBox">
            <van-row :gutter="8">
              <van-col :span="24" v-for="(items, indexs) in item.studentName" :key="indexs">
                <div class="itemsList" :style="(indexs + 1) % 2 == 0 ? 'background: #FFFFFF;' : 'background: #FFF1EC;'">
                  <div class="names">
                    <div class="num1">{{ indexs + 1 }}</div>
                    <div class="num2">
                      {{ items }}</div>
                  </div>
                </div>
              </van-col>
            </van-row>
            <van-row style="width:100%;padding: 50px 0;" justify="center" v-if="item.studentName.length == 0">
              <van-empty :image-size="[144, 109]" description="暂无数据" :image="recordImg2" />
            </van-row>
          </div>
          <!-- <div class="rowBox" v-show="false">
            <van-row :gutter="4">
              <van-col :span="24" v-for="(items, indexs) in item.classDisplayList" :key="indexs">
                <div class="itemsList"
                  :style="items.soutNum % 2 == 0 ? 'background: #FFFFFF;' : 'background: #FFF1EC;'">
                  <div class="names">
                    <div class="num1">{{ items.soutNum < 10 ? '0' + items.soutNum : items.soutNum }}</div>
                        <div class="num2">
                          {{ items.studentName }}</div>
                    </div>
                  </div>
              </van-col>
            </van-row>
            <van-row style="width:100%;padding: 50px 0;" justify="center" v-if="item.classDisplayList.length == 0">
              <van-empty :image-size="[144, 109]" description="暂无数据" :image="recordImg2" />
            </van-row>
          </div> -->
        </div>
      </div>
      <van-row style="width:100%" justify="center" v-if="scrollList.length == 0">
        <van-empty image-size="300" description="暂无考勤" :image="recordImg" />
      </van-row>
    </div>
    <!-- <teleport to="#app">
      <van-popup v-model:show="showClass" round position="bottom" class="rightDrawBox2">
        <van-cascader v-model="cascaderValue" title="请选择班级" :options="options" active-color="#3D7FFF"
          @close="showClass = false" @change="onChange" @finish="onFinish" :field-names="fieldNames" />
      </van-popup>
    </teleport> -->
    <!-- <VideoModle></VideoModle> -->
    <Footer ref="footer">
    </Footer>
  </div>
</template>
<script lang="ts" setup>
import $util from '../util/util'
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import infoImg from '../assets/images/icon_class@2x.png'
import dropDown from '../assets/images/icon_choose.png'
import recordImg from '../assets/images/ikon_no_studen.png'
import recordImg2 from '../assets/images/ikon.png'
import store from '../store'
import { ClassDisplay2, getTime, getSchoolInfo } from '../components/Api/IndexApi'
import VideoModle from '../components/Common/VideoModle.vue'
import Footer from '../components/Common/Footer.vue'
import jsonData from '../util/display.json'
const router = useRouter()
// 数据加载的loading
const loading = ref(false)
// 班级列表
// const options = ref<any>([])
// const fieldNames = {
//   text: 'name',
//   value: 'id',
//   children: 'children'
// }
// 选中的学部id
// const checkFacullyName = ref('')
// 选中的年级id
// const checkGradeId = ref('')
// const checkGradeName = ref('')
// 选择班级列表弹窗
// const showClass = ref(false)
// 选择班级的model
// const cascaderValue = ref('')
// 点击选择班级
// const chooseClass = () => {
//   options.value = store.state.facully
//   showClass.value = true
// }
const timer = ref<any>(null)
// 将数组分为几组
// 分组方法三个参数分别是 新数组，原数组，几个分为一组
const groupArray = async (newArr: any, arr: any, num: any) => {
  if (arr.length > 0) {
    if (arr.length > num) { //arr 的长度大于 分组数
      newArr.push(arr.splice(0, num)) //分组
      groupArray(newArr, arr, num) //递归
    } else {
      //如果长度不够分为一组，就直接把剩余的分为一组
      newArr.push(arr.splice(0, arr.length))
    }
  }
  return newArr //返回已分组的新数组
}
// const onChange = (row: any) => {
//   if (row.tabIndex === 0) {
//     const parmas = {
//       facully_id: row.value
//     }
//     store.dispatch('setGrade2', parmas)
//     checkFacullyName.value = row.selectedOptions[row.selectedOptions.length - 1].name
//     setTimeout(() => {
//       row.selectedOptions[0].children = store.state.grade
//       showClass.value = true
//     }, 500)
//   }
// }
// const onFinish = async ({ selectedOptions }: any) => {
//   page.value = 1
//   showClass.value = false
//   checkGradeName.value = `${checkFacullyName.value}-${selectedOptions[selectedOptions.length - 1].name}`
//   // 发起请求，获取课堂学生名单
//   checkGradeId.value = selectedOptions[selectedOptions.length - 1].id
//   let obj = {
//     checkGradeName: checkGradeName.value,
//     checkGradeId: checkGradeId.value
//   }
//   window.localStorage.setItem('selectGrade', JSON.stringify(obj))
//   loading.value = true
//   maxlength.value = 0
//   // 拉取年级下面的班级
//   await getClassList()
//   loading.value = false
//   await swiperScroll()
// }
// 数据翻页
const page = ref<number>(1)
const maxlength = ref<number>(0) // 验证数组里面最长的数据
const timerThird = ref<any>(null)
const num = ref<number>(0)
// 获取班级列表
const getClassList = async () => {
  const res: any = await ClassDisplay2()
  if (res.code !== 200) {
    return Toast(res.msg)
  }
  if (res.data && res.data.length > 0) {
    res.data.forEach((item: any, index: number) => {
      item.animate = false
      item.studentName.forEach((items: any, indexs: number) => {
        items.soutNum = indexs + 1
      })
    })
  }
  // num.value++
  // console.log(num.value, 'hdfdsfdsfdsfsdfdsf')
  // if (num.value < 7) {
  //   scrollList.value = await groupArray([], JSON.parse(JSON.stringify(jsonData.data.resultVO)), 7)
  // } else if (num.value < 12) {
  //   scrollList.value = await groupArray([], JSON.parse(JSON.stringify(res.data.resultVO)), 7)
  // } else {
  //   scrollList.value = await groupArray([], JSON.parse(JSON.stringify(jsonData.data.resultVO)), 7)
  // }
  scrollList.value = await groupArray([], JSON.parse(JSON.stringify(res.data.resultVO)), 7)
  // 计算一页需要滚动多少秒 拿最长的数据/2*3秒 然后翻页到下一页
  scrollList.value.forEach((item: any, index: number) => {
    item.forEach((items: any) => {
      if (items.studentName.length > maxlength.value) {
        maxlength.value = items.studentName.length
      }
    })
  })
}
const swiperScroll = async () => {
  clearInterval(timer.value)
  timer.value = null
  // let countSeconnd: number = Math.ceil(maxlength.value - showNum.value) * 5 + 5
  timer.value = window.setInterval(async () => {
    if (scrollList.value.length > 1) {
      console.log('jinalie')
      if (Number(page.value) + 1 > scrollList.value.length || scrollList.value.length <= 1) {
        // 当前已是最后一页
        page.value = 1
      } else {
        page.value = Number(page.value) + 1
      }
    }
  }, 9 * 1000)
}
// 模拟数据
const scrollList = ref<any>([])
// 屏幕自适应计算
const nowSize = (val: any) => {
  var nowClientWidth = document.documentElement.clientWidth
  return val * (nowClientWidth / 1920)
}
const titleRef = ref<any>(null)
const totalDataRef = ref<any>(null)
const footer = ref<any>(null)
const showNum = ref<number>(0)
// 轮播的高度
const scrollHeight = ref<number>(0)
const listBoxHeight = ref<number>(0)
const getHeight = async () => {
  listBoxHeight.value = document.body.clientHeight - nowSize(83) - footer.value.$el.clientHeight
  let contentHeight = listBoxHeight.value - nowSize(157)
  // 计算当前高度是否需要滚动 查看一页可以显示所烧条*2
  showNum.value = Math.trunc(contentHeight / Math.ceil(nowSize(40)))
  scrollHeight.value = Math.trunc(nowSize(40) * showNum.value)
}
// 获取服务器的时间
const timerTwo = ref<any>(null)
const Time = ref<any>('')
const TimeStamp = ref<any>('')
// 获取服务器时间
const getTimeStamp = async () => {
  const res: any = await getTime()
  if (res.code !== 1) return
  Time.value = JSON.parse(res.data.time)
  TimeStamp.value = $util.getNowData(Time.value)
}
// 获取学校信息
const schoolInfo = ref<any>({})
const getShool = async () => {
  const res: any = await getSchoolInfo()
  if (res.code !== 1) return
  schoolInfo.value = res.data
}
onMounted(async () => {
  getShool()
  getTimeStamp()
  timerTwo.value = null
  timerTwo.value = setInterval(async () => {
    Time.value++
    TimeStamp.value = $util.getNowData(Time.value)
  }, 1000)
  await getHeight()
  window.addEventListener('resize', () => {
    // 计算高度
    getHeight()
  })
  // if (window.localStorage.getItem('selectGrade') as any) {
  //   checkGradeName.value = JSON.parse(window.localStorage.getItem('selectGrade') as any).checkGradeName
  //   checkGradeId.value = JSON.parse(window.localStorage.getItem('selectGrade') as any).checkGradeId
  //   loading.value = true
  //   // 拉取年级下面的班级
  //   await getClassList()
  //   loading.value = false
  //   await swiperScroll()
  // }
  loading.value = true
  // 拉取年级下面的班级
  clearInterval(timerThird.value)
  timerThird.value = null
  await getClassList()
  await swiperScroll()
  timerThird.value = window.setInterval(async () => {
    await getClassList()
  }, 3 * 1000)
  loading.value = false
})
watch(
  () => scrollList.value,
  async (newVal, oldVal) => {
    if (newVal.length !== oldVal.length) {
      console.log('页数变化了')
      page.value = 1
      await swiperScroll()
    }
  },
  { deep: true }
)
onBeforeUnmount(() => {
  // 清除定时器
  clearInterval(timer.value)
  clearInterval(timerTwo.value)
  clearInterval(timerThird.value)
})
</script>
<style lang="scss" scoped>
.content-flex-box {
  background: #ffffff;
  box-sizing: border-box;

  .class-flex-box {
    height: 68px;
    background-image: url('@/assets/images/title.png');
    background-size: 100% 100%;
    padding: 0 20px;
    color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;

    .statusFlex {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 1;

      img {
        display: inline-block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #ffffff;
        margin-right: 20px;
      }

      span {
        font-weight: bold;
        font-size: 24px;
      }
    }

    .timeShow {
      font-weight: bold;
      font-size: 28px;
      text-align: center;
    }

    .class-image {
      width: 120px;
      height: 120px;
      background: #EEFAFF;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      margin-right: 20px;

      img {
        display: inline-block;
        width: 64px;
      }
    }

    .classSelect {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      font-weight: bold;
      font-size: 24px;

      .images {
        width: 40px;
        height: 40px;
        background: #EEFAFF;
        border-radius: 60px 60px 60px 60px;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        margin-right: 10px;

        img {
          width: 100%;
          display: inline-block;
        }
      }

      .imageOne {
        width: 18px;
        height: 18px;
      }
    }
  }

  .list-box {
    display: flex;
    padding: 15px 0 0 0;
    justify-content: center;

    .listItem {
      flex: 1;
      max-width: 238px;
      padding: 0 18px;
      border-right: 1px solid rgba(42, 186, 252, 0.4);

      .title {
        width: 100%;
        height: 48px;
        margin-bottom: 10px;
        background: #2ABAFC;
        border-radius: 4px 4px 4px 4px;
        line-height: 48px;
        font-weight: bold;
        font-size: 19px;
        text-align: center;
        color: #ffffff;
      }

      :deep(.van-col) {
        height: 40px;
        line-height: 40px;
        // margin-bottom: 4px;
      }

      .totalData {
        margin-bottom: 11px;

        .itemsList2 {
          font-weight: bold;
          font-size: 15px;
          color: #333333;
          height: 40px;
          line-height: 40px;
          background: #ECF5FF;
          border-radius: 2px;
          padding: 0 8px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        :deep(.van-col) {

          margin-bottom: 4px;
        }
      }

      .itemsList {
        height: 100%;
        border-radius: 2px;
        font-weight: bold;
        font-size: 16px;
        color: #333333;

        .names {
          height: 100%;
          line-height: 40px;
          // letter-spacing: 2px;
          display: flex;
          padding: 0 10px;

          .num1 {
            width: 20px;
            display: inline-block;
            margin-right: 8px;
            text-align: right;
            color: #FF7546;
          }

          .num2 {
            flex: 1;
            overflow: hidden;
            // text-align: justify;
            // text-align-last: justify;
            text-align: center;
          }

          // .num3 {
          //   text-align: left;
          //   letter-spacing: -1Px;
          // }
        }
      }

      // 请假状态
      .leave-status-box {
        background: #C49218;
        color: #ffffff;
      }

      // 已到达状态
      .register-status-box {
        background: #41CC8B;
        color: #ffffff;
      }

      // 已接到状态
      .finish-status-box {
        background: #3D7FFF;
        color: #ffffff;
      }

      // 没接到状态
      .defalte-status-box {
        background: #FF7546;
        color: #ffffff;

      }
    }

    .listItem:last-of-type {
      border: none;
    }
  }
}

.anim {
  transition: all 0.5s !important;
}
</style>